<html ng-app="app">

<head>
<meta charset="utf-8">
	<style>
	.active { 
		color: red; 
		font-weight: bold;
	}

	.content {
		border: 1px dotted black;
	}

	</style>
</head>
<ul class="nav navbar-nav">
  <li>
    <a ui-sref="login" ui-sref-active="active">Login</a>
  </li>
  <li>
    <a ui-sref="home"  ui-sref-active="active">Home</a>
  </li>
    <li>
    <a ui-sref="page"  ui-sref-active="active">Page</a>
    <ul>
    	<li><a ui-sref="page({id: 1})" ui-sref-active="active">Page 1</a></li>
    	<li><a ui-sref="page({id: 2})" ui-sref-active="active">Page 2</a></li>
    	<li><a ui-sref="page({id: 3})" ui-sref-active="active">Page 3</a></li>
    </ul>
  </li>
  <li>
    <a ui-sref="about" ui-sref-active="active">About</a>
  </li>
  <li>
    <a ui-sref="contacts.list" ui-sref-active="active">嵌套路由</a>
  </li>
  <li>
    <a ui-sref="parent" ui-sref-active="active">点我显示父view内容</a>
  </li>
  <li>
    <a ui-sref="parent.child" ui-sref-active="active">点我显示父view与子view内容</a>
  </li>
  <li>
    <a ui-sref="lazyLoad" ui-sref-active="active">lazyLoad (use ocLazyLoad)</a>
  </li>
</ul>	


<div ui-view class="content">

</div>


<div ui-view="lazyLoadView">
	
</div>

	
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="node_modules/oclazyload/dist/ocLazyLoad.js"></script>
<script>
let app = angular.module('app', ["ui.router", "oc.lazyLoad"])
	.service('demoService', function($http) {
		return {
			loadData() {
				return $http.get('data.json');
			},
			getPage(id) {

			}
		}
	})
	.controller('loginController', function($log, $scope, $stateParams, $state, demoService) {
		console.dir($stateParams)
        console.log($state.current.data)

		let vm = this;

		vm.name = $stateParams.name;

		vm.reload = function() {
			// $state.reload()方法只刷新路由部分，与浏览器的刷新按钮功能是不一样的
			// 重新执行整个controller
			$log.debug($state);
			$state.reload();
		}

		vm.go = function() {
			$state.go('home')
				.then(res => console.log(res))
		}

		demoService.loadData()
			.then(res => {
				console.log(res.data);
			})
	})
	.controller('pageController', function($scope, $stateParams, $state, demoService) {
		let vm = this;
		if ($stateParams.id) {
			let id = $stateParams.id;
			demoService.loadData()
				.then(res => {
					let pages = res.data.pages;
					vm.title = pages[id-1].title;
				})
		}
	})
    .config(function($stateProvider, $urlRouterProvider){
    	// templateProvider, controllerProvider, resolve, views, abstract, reloadOnSearch, data

		$urlRouterProvider.otherwise('/login')
		// .rule(handler)  .when(whenPath, toPath)

    	let routeStates = [
    		{
	            name: 'home',
	            url: '/home',
	            template: '<h3>home!</h3>'
        	},
        	{
	            name: 'about',
	            url: '/about/',
	            template: '<h3>about!</h3>',
	            controller: function($scope, simpleObj, promiseObj, demoService) {
	            	console.log(simpleObj);
	            	console.log(promiseObj);
	            	console.log(demoService.loadData().then(res => console.log(res.data.data)));
	            },
	            // 基于uiRouter的resolve是在加载controller和template之前所执行的一系列操作，它帮助我们初始化我们所要前往的那一个视图。
	            // 只有be solved(操作完成)，controller才会被实例化。
                resolve: {
                	simpleObj: function() {
                		return {value: 'simple'}
                	},
                	// 可以注入service
                	promiseObj: function(demoService) {
                		return demoService.loadData();
                	},
                	// 直接写service name, 会自动在module内查找名为demoService的service
                	demoService: "demoService"
                }
        	},
        	{
	            name: 'page',
	            // 带参数的路由
	            url: '/page/:id',
	            controller: 'pageController as page',
	            templateUrl: 'views/page.html',
        	},
        	{
	            name: 'lazyLoad',
	            // 带参数的路由
	            url: '/lazyLoad',
	            // 保证先加载controller再加载view
	            views: {
				    "lazyLoadView": {
				      controller: 'lazyCtrl',
				      templateUrl: 'views/lazy.html'
				    }
				},
				resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
				    loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
				        // 如果是一个文件可简写 return $ocLazyLoad.load('js/lazyCtrl.js');
				    	return $ocLazyLoad.load({
                            name: 'lazyModule',
                            files: ['js/lazyCtrl.js']
                        });
				    }]
				}
        	},
        	{
	            name: 'login',
	            url: '/login',
	            // 也可以写成loginController as login
	            controller: 'loginController',
	            // controller中写 let vm = this;
	            controllerAs: 'login',
	            templateUrl: 'views/login.html',
	            onEnter() {
	            	console.log("enter~")
	            },
	            onExit() {
	            	console.log("exit~")
	            },
	            // 通过controller中 $stateParams.name获取
	            params: {
                    name: 'finley'
                },
                // 通过controller中 $state.current.data获取
                data: {
                    testData: 44
                }
        	},
            {
                name: 'contacts',
                // abstract: true 表明此状态不能被显性激活，只能被子状态隐性激活
                // 对于嵌套式的状态规则使用 abstarct 配置的时候不允许直接访问父状态名
                // 
                abstract: true,
                url: '/contacts',
                resolve: {
                    contacts: function(demoService) {
                        return demoService.loadData();
                    }
                },
                templateUrl: 'views/contacts.html',
                controller: function($scope, $state) {
                    console.log("1111");
                    $scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }];
                    $state.transitionTo('contacts.list');
                }
            },
            {
                name: 'contacts.list',
                templateUrl: 'views/contacts.list.html'
            },
            {
                name: 'contacts.detail',
                url: '/{contactId:[0-9]{1,4}}',
                templateUrl: 'contacts.detail.html',
                controller: function($scope, $stateParams) {

                }
            },
            {
                name: 'parent',
                // 带参数的路由
                url: '/parent',
                template:'<div>parent'
                    +'<div ui-view><div>'// 子View
                    +'</div>',
            },
            {
                name: 'parent.child',
                // 带参数的路由
                url: '/child',
                template:'<div>child</div>'
            },
    	]

        routeStates.forEach(state => $stateProvider.state(state))

        $stateProvider.state('404', {
            url: '/404',
            template:'Not found',
        })
    })

</script>



</html>